import { useEffect, useImperativeHandle, useRef } from 'react'
import SignatureCanvas from 'react-signature-canvas'
import './index.scss'
import { ClearOutlined } from '@ant-design/icons'

export default function WritePanel(props: any) {
  useImperativeHandle(props.onRef, () => {
    return {
      getBase64: getBase64,
    }
  })

  const sigCanvas = useRef<any>(null)
  const { value } = props
  useEffect(() => {
    if (sigCanvas && value) {
      clear()
      sigCanvas.current.fromDataURL(value)
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])
  const clear = () => {
    if (sigCanvas) sigCanvas.current.clear()
  }
  const getBase64 = () => {
    if (sigCanvas) return sigCanvas.current.toDataURL()
    clear()
  }
  return (
    <div className="write-panel">
      <div className="operate"></div>
      <SignatureCanvas
        penColor="black"
        ref={sigCanvas}
        canvasProps={{ width: 500, height: 200, className: 'sigCanvas' }}
      />
      <div className="operate">
        <ClearOutlined onClick={clear} />
      </div>
    </div>
  )
}
